<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>登录窗口</title>
</head>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f4f4f4;
        margin: 0;
        padding: 0;
    }

    /* 表单大小自适应 */
    form {
        display: flex;
        flex-direction: column;
    }

    /* 登录框整体大小 */
    .login-container {
        width: 300px;
        margin: 100px auto;
        padding: 20px;
        background: royalblue;
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
    }

    /* 居中 */
    h1 {
        color: black;
        text-align: center;
    }

    /* 用户密码框 */
    input[type="text"],
    input[type="password"] {
        padding: 10px;
        margin-bottom: 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    /* 登录键 */
    input[type="submit"] {
        padding: 10px;
        border: none;
        border-radius: 4px;
        background-color: #5cb85c;
        color: white;
        cursor: pointer;
    }

    input[type="submit"]:hover {
        background-color: blue;
    }
</style>
<body>
<div class="login-container">
    <form>
        <h1>登录</h1>
        <input type="text" name="username" placeholder="用户名" required />
        <input type="text" name="password" placeholder="密码" required />
        <input type="submit" value="登录" />
    </form>
    <!--导入Vue的js文件-->
    <script src="js/vue.min.js"></script>
    <!--导入axios的js文件-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        new Vue({
            el:"#login-container",
            data:{
                username:"",
                password:""
            },
            methods:{
                login(){
                    axios.post("http://localhost:8080/login2?username="+this.username+"&password="+this.password)
                        .then(result=>{
                            if(result.data.data){
                                alert("登录成功")
                            }else{
                                alert("登录失败")
                            }
                        });
               }
            },mounted() {
                this.login();
            }
        })
    </script>
</div>
</body>
</html>